<template>
  <div id="we">
    <div class="we">
      <div class="head">
        <div class="title">工作经历</div>
      </div>
      <div class="body">
        <div class="form">
          <el-form :rules="rules" :model="form" label-width="120px">
            <el-form-item label="公司名称" prop="weName">
              <el-input v-model="form.weName" placeholder="请输入经历标题" />
            </el-form-item>
            <el-form-item label="公司城市" prop="weCity">
              <el-input v-model="form.weCity" placeholder="请输入经历标题" />
            </el-form-item>
            <el-form-item label="自我评价" prop="weSeva">
              <el-input v-model="form.weSeva" placeholder="请输入自我评价" />
            </el-form-item>
            <!-- 时间 -->
            <el-form-item label="开始与结束" prop="weDate">
              <el-date-picker
                v-model="form.weStart"
                type="date"
                placeholder="请选择日期"
              /><span style="color: aliceblue; margin: 0 1%"
                ><el-icon><SemiSelect /></el-icon
              ></span>
              <el-date-picker
                v-model="form.weEnd"
                type="date"
                placeholder="请选择日期"
              />
            </el-form-item>
            <el-form-item label="工作图片">
              <el-upload
                v-model:file-list="fileList"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="1"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <!-- 上传浏览 -->
              <el-dialog v-model="dialogVisible">
                <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
              </el-dialog>
            </el-form-item>

            <el-form-item label="内容" prop="storyFirst">
              <el-input
                v-model="form.weCon"
                type="textarea"
                placeholder="请输入内容讲解"
                :rows="7"
                resize="none"
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="AddJ" round>增加</el-button>
              <el-button round>回退</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormRules, UploadProps, UploadUserFile } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const fileList = ref<UploadUserFile[]>([]);

const form = reactive({
  id: "",
  weName: "",
  weCity: "",
  weSeva: "",
  weCon: "",
  weStart: "",
  weEnd: "",
});
const rules = reactive<FormRules>({
  weName: [
    { required: true, message: "请输入标题内容", trigger: "blur" },
    { min: 3, max: 30, message: "不要超过30", trigger: "blur" },
  ],
  weCity: [
    { required: true, message: "请输入城市", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  weSeva: [
    { required: true, message: "请输入自我评价", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  weDate: [{ required: true, message: "请选择时间", trigger: "blur" }],
  weCon: [
    { required: true, message: "请输入历史内容", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
});

const AddJ = () => {
  alert("提交成功");
};
const dialogImageUrl = ref("");
//显示预览上传的图片
const dialogVisible = ref(false);

//删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
//浏览图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
#we {
  width: 100%;
  height: 100%;
  .we {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(
      0deg,
      rgba(white, 0.1),
      rgba(white, 0.3),
      rgba(white, 0.1)
    );
    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;
      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }
    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 2px;
        height: 100%;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 2px;
        background: aqua;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 2px;
        background: rgba(white, 0.2);
      }

      .form {
        width: 75%;
        margin-left: 10%;
        :deep(.el-form-item__label) {
          color: white;
        }

        :deep(.el-input__wrapper) {
          --el-input-focus-border-color: aqua;
          .el-input__inner {
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-input__wrapper) {
          background-color: transparent;
          .el-input__inner {
            // background-color: transparent;
          }
        }
        :deep(.el-textarea) {
          // 一下为正常
          background-color: transparent;
          .el-textarea__inner {
            overflow: hidden;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 2px;
              height: 100%;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              background: aqua;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 2px;
              background: rgba(white, 0.2);
            }
            background-color: transparent;
            --el-input-focus-border-color: aqua;
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-button) {
          margin: 0 auto;
          width: 30%;
          background-color: transparent;
          color: white;
          &:first-child {
            --el-button-border-color: aqua;
            --el-button-active-border-color: aqua;
            --el-button-hover-text-color: aqua;
            --el-button-divide-border-color: aqua;
          }
        }
        :deep(.el-dialog) {
          width: 30%;
          --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
          border-image-source: radial-gradient(
            65% 65%,
            transparent 0px,
            transparent 100%,
            orange 100%
          );
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;
          .el-dialog__title {
            color: orange;
          }
          .el-dialog__close {
            color: orange;
            &:hover {
              color: red;
            }
          }
          .el-dialog__body {
            span {
              color: white;
            }
          }
          .pImg {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
